<template>
  <div>
    <el-container style="border: 1px solid #eeepx;">
      <!-- 左侧导航栏 -->
      <el-aside class="leftfix" style="margin-top:60px; width:200px;">
        <el-menu :default-openeds="[num]">
          <el-submenu
            @click.native="open(String( index + 1 ))"
            :index="String( index + 1 )"
            v-for="(item,index) in routes"
            :key="index"
            v-show="!item.meta.hidden"
          >
            <template slot="title">
              <i  :class= item.meta.icon></i>
              {{item.meta.title}}
            </template>

            <el-menu-item-group v-for="(i,v) in item.children" :key="v" v-show="!i.meta.hidden">
              <router-link :to="item.path + '/' + i.path ">
                <el-menu-item :index="`${index+1}-${v+1}`">
                  <i :class="i.meta.icon"></i>
                  {{i.meta.title}}
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 顶上页面 -->
      <el-container>
        <el-header
          style="display:flex;justify-content: space-between; 
          font-size: 12px;
          height:60px;line-height:60px;"
          class="fix"
        >
          <!-- 顶上导航栏 -->

          <router-link to="/show/index">
            <i class="el-icon-upload" style="font-size:20px;font-weight:900;">
              <span style="margin-left: 10px; font-size:20px;font-weight:900">卖座后台管理系统</span>
            </i>
          </router-link>

          <div>
            <i class="el-icon-user-solid" style="margin-right: 15px;">
              <span style="margin-left: 5px;">{{usrename}}</span>
            </i>

            <a href="#" @click="exit">
              <i class="el-icon-open" style="margin-right:5px;"></i>
              <span>退出系统</span>
            </a>
          </div>
        </el-header>
        <!-- 子路由入口 -->
        <el-main style="margin-top:45px;padding-left:220px;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { routes } from "../router/index";
export default {
  data() {
    return {
      usrename: "",
      routes,
      num: ""
    };
  },

  created() {
    this.usrename = this.$store.state.name;
  },
  methods: {
    open(num) {
      this.num = num;
    },
    exit() {
      let url = "/user/logout";
      this.$axios.get(url).then(res => {
        this.$store.commit(`updataname`, "");
        this.$store.commit(`updataislogin`, false);
        this.$router.push("/login");
      });
    }
  }
};
</script>
<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
.el-submenu .el-menu-item {
  padding: 0;
}
.fix {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background-image: url("../assets/img/img.jpg");
  background-size: 100% 100%;
  background-repeat: repeat;
}
.leftfix {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background: #fff;
  z-index: 1;
}
</style>

